var app = getApp()
const fetch = require('../../utils/fetch')
Page({
  data: {
    daily: null,
    mysrc: '../../utils/images/theme5_result_tip.png'
  },
  onLoad: function (option) {
    wx.showShareMenu({
      withShareTicket: true
    })
    wx.showLoading({
      title: '加载中',
    });
    var that = this
    wx.getSystemInfo({
      success: function (res) {
        // 获取屏幕宽度
        let analytic_width = res.windowWidth - 32;
        // 圆的大小
        let img_circle_width = 278;
        let line_width = res.screenWidth - 32;
        that.setData({
          analytic_width,
          img_circle_width,
          line_width
        })
      }
    })
    var id = option.id;
    var day = option.day;
    let user_id = app.loginUser.id;
    fetch('small/' + user_id + '/info/detail?id=' + id).then(res => {
      var day_date = that.formatDate(day);
      var start_date = that.formatDate(res.data.data.startTime)
      wx.hideLoading()
      var next_day = new Date(day_date);
      var start_day = new Date(start_date);
      var day_s1 = next_day.getTime(),
        day_s2 = start_day.getTime();
      var day_total = (day_s1 - day_s2) / 1000;

      // 在这个周期里面, 总共几天
      var num = parseInt(day_total / (24 * 60 * 60));

      var cycle_days = num + 1; //例假期时长
      that.setData({
        cycle_days
      })
      let detail = res.data.data.detail;
      if (detail !== '无以上任何行为' && detail) {
        let details = detail.split("|");
        this.setData({
          details
        })
      }
      let startTime = res.data.data.startTime;
      let endTime = res.data.data.endTime;
      // 周期长度
      let physiologicalLength = res.data.data.physiologicalLength;
      let rad = 360 / physiologicalLength; //一个角度  每天占多少度
      let cases_days = res.data.data.mensturationLength; //例假期时长
      let daily = res.data.data.list;
      // 表示激增的条件判断
      var cycle_cyclelength = this.GetDateStr(start_day, physiologicalLength);

      var enter = new Date(that.formatDate(day));
      var cycle_cyclelength1 = new Date(that.formatDate(day));
      var surge_day1 = enter.getTime(),
        surge_day2 = cycle_cyclelength1.getTime(); //例假期+周期长度

      // num 总共 num 天
      // 就是今天
      var surge_total = (surge_day2 - surge_day1) / 1000;

      var surge_num = parseInt(surge_total / (24 * 60 * 60));
      var today = cycle_days * rad;

      if (today > 360) {
        today = 338
        that.setData({
          surge_num,
          today: 338
        })
      } else {
        that.setData({
          surge_num,
          today: today
        })
      }
      // 画布宽度，与CSS中定义等值
      var canvasWidth = this.data.line_width;
      // 画布高度，与CSS中定义等值
      var canvasHeight = 80;
      // x轴放大倍数
      var ratioX = 20.4;
      // y轴放大倍数
      var ratioY = 2;
      // 灰色
      var gray = '#979797';
      // 浅灰
      var lightGray = '#c7cce5';
      // 灰色
      var gray = '#cccccc';
      // 最大值
      var max = Math.max.apply(null, daily)
      var min = Math.min.apply(null, daily)
      const context = wx.createCanvasContext('line-canvas');
      /* Part1.画折线 */
      daily.forEach(function (daily, i, array) {
        if (i < array.length - 1) {
          // 当前点坐标
          var currentPoint = {
            x: (i + 1) * ratioX,
            y: canvasHeight - (6 / 75) * daily
          };
          if (currentPoint.y < 6) {
            currentPoint.y = 6
          }
          // 下一个点坐标
          var nextPoint = {
            x: (i + 2) * ratioX,
            y: canvasHeight - (6 / 75) * (array[i + 1])
          }
          if (nextPoint.y < 6) {
            nextPoint.y = 6
          }
          // 开始
          context.beginPath();
          // 绘制虚线
          context.setLineDash([3, 3]);
          // 移动到当前点
          context.moveTo(currentPoint.x, currentPoint.y);
          // 画线到下个点
          context.lineTo(nextPoint.x, nextPoint.y);
          // 设置属性
          context.setLineWidth(1);
          // 设置颜色
          context.setStrokeStyle(gray);
          // 描线
          context.stroke();
        }
      });

      /* Part2.画圆圈 */
      daily.forEach(function (daily, i, array) {
        // 当前点坐标
        var currentPoint = {
          x: (i + 1) * ratioX,
          y: canvasHeight - (6 / 75) * daily
        };
        if (currentPoint.y < 6) {
          currentPoint.y = 6
        }
        context.beginPath();
        context.arc(currentPoint.x, currentPoint.y, 4, 0, 2 * Math.PI);
        context.setFillStyle('#4CAEF7');
        context.fill();
      });
      var last = {
        x: daily.length * ratioX,
        y: canvasHeight - (6 / 75) * daily[daily.length - 1] - 8
      }
      if (last.y < 6) {
        last.y = 10
      }
      context.setFontSize(10);
      context.fillText('本次', last.x + 5, last.y, 15);
      context.draw();
      let waterContent = Math.round(daily[daily.length - 1])
      that.setData({
        daily,
        record: res.data.data,
        waterContent
      })
      // 下面表示例假期跟易排卵期
      let centre = this.data.img_circle_width / 2
      let txte = centre + 1 / 2 * centre;
      let r = centre - 16;
      let r1 = centre - 14;
      // 例假期
      let start = this.getRads(280);
      let endrad = cases_days * rad
      let end = start + this.getRads(endrad);
      // 易排卵
      let ovulation = (physiologicalLength - 17) / physiologicalLength * 360 - 80;
      let ovulation_start = this.getRads(ovulation);
      let ovulation_end = ovulation_start + this.getRads(7 * rad);

      var cxt_arc = wx.createCanvasContext('canvasArc'); // 创建并返回绘图上下文context对象.

      cxt_arc.setLineWidth(26);
      cxt_arc.setStrokeStyle('#7085FF');
      cxt_arc.setLineCap('round')
      cxt_arc.beginPath(); // 开始一个新的路径    
      cxt_arc.arc(centre, centre, r, start, end, false); // 设置一个原点(106,106)，半径为100的圆的路径到当前路径    
      cxt_arc.stroke(); // 对当前路径进行描边      


      cxt_arc.setLineWidth(26);
      cxt_arc.setStrokeStyle('#4CAEF7');
      cxt_arc.setLineCap('round')
      cxt_arc.beginPath(); // 开始一个新的路径  
      cxt_arc.arc(centre, centre, r1, ovulation_start, ovulation_end, false);
      cxt_arc.stroke(); // 对当前路径进行描边  
      cxt_arc.stroke();

      // 绘制中间的球和 今天
      cxt_arc.save(); // 保存默认状态
      cxt_arc.translate(140, 140);
      cxt_arc.rotate(today * Math.PI / 180); // 278
      cxt_arc.drawImage('../../utils/images/today.png', -25, -145, 40, 40);
      cxt_arc.drawImage('../../utils/images/theme5_result_tip.png', -150, -150, 300, 300);
      cxt_arc.restore(); //恢复默认状态

      cxt_arc.translate(140, 140);
      cxt_arc.setFontSize(20)
      cxt_arc.textAlign = "center";
      cxt_arc.textBaseline = 'middle';
      cxt_arc.setFillStyle("#ffffff");
      cxt_arc.fillText('生理期', 0, -15);
      cxt_arc.fillText(`第${cycle_days}天`, 0, 15);
      cxt_arc.draw();

    })
  },
  onReady: function (e) {

  },
  getRads: function (degrees) {
    return (Math.PI * degrees) / 180;
  },
  GetDateStr: function (a, AddDayCount) { //几天后的日期
    var dd = new Date(a);
    dd.setDate(dd.getDate() + AddDayCount);
    var y = dd.getFullYear();
    var m = dd.getMonth() + 1;
    var d = dd.getDate();
    return y + "-" + m + "-" + d;
  },
  formatDate: function (time) {
    //将xxxx-xx-xx的时间格式，转换为 xxxx/xx/xx的格式   
    return time.replace(/\-/g, "/");
  },
  onShow: function () { // 页面显示  
  },
  onHide: function () { // 页面隐藏   
  },
  onUnload: function () { // 页面关闭 
  }
})